<!doctype html>
<html ng-app>
  <head>
  
    <!-- script src="http://code.angularjs.org/angular-1.0.1.min.js" script -->
    
    <script src="${resource(dir:'js/jquery', file:'jquery-1.7.2.min.js')}"></script>
    <script src="${resource(dir:'js/angular', file:'angular-1.0.1.js')}"></script>
    
    <script src="${resource(dir:'bootstrap/js', file:'bootstrap.js')}"></script>
	<script src="${resource(dir:'kickstart/js', file:'kickstart.js')}"></script>
		
		
		
    <script type="text/javascript">
    
    function TodoCtrl($scope) {

    	  // Atributos
    	  $scope.todoText = '';
    	  
    	  $scope.todos = [
    	    {text:'learn angular'        , done:true},
    	    {text:'build an angular app' , done:false}
    	    ];


      	  // Metodos
    	  $scope.addTodo = function() {
        	  
    	    $scope.todos.push(
    	    	               {
        	    	             text: $scope.todoText, 
        	    	             done: false
        	    	           }
        	    	          );
	          
    	    $scope.todoText = '';
    	    
    	  };


      	 
    	  $scope.remaining = function() {
        	  
    	    var count = 0;
    	    
    	    angular.forEach($scope.todos, function(todo) {
    	      count += todo.done ? 0 : 1;
    	    });
    	    
    	    return count;
    	    
    	  };


      	 
    	  $scope.archive = function() {
        	  
    	    var oldTodos = $scope.todos;
    	    
    	    $scope.todos = [];
    	    
    	    angular.forEach(oldTodos, function(todo) {
    	      if (!todo.done) $scope.todos.push(todo);
    	    });
    	    
    	  };

    	  
    	}
	
    </script>
    
  </head>
  <body>
    <h2>Todo</h2>
    <div ng-controller="TodoCtrl">
      <span>{{remaining()}} of {{todos.length}} remaining</span>
      [ <a href="" ng-click="archive()">archive</a> ]
      <ul class="unstyled">
        <li ng-repeat="todo in todos">
          <input type="checkbox" ng-model="todo.done">
          <span class="done-{{todo.done}}">{{todo.text}}</span>
        </li>
      </ul>
      <form ng-submit="addTodo()">
        <input type="text" ng-model="todoText"  size="30"
               placeholder="add new todo here">
        <input class="btn-primary" type="submit" value="add">
      </form>
    </div>
  </body>
</html>